import React, { useRef, useEffect, useContext } from 'react';
import BaseTable from '../BaseTable';
import TableContext from '@root/lib/TableContext';
import SimulateScrollBar from './SimulateScrollBar';
import getCssPrefix from '@root/lib/getCssPrefix';
const { cssPrefix } = getCssPrefix();
function TableBody(props) {
    const {
        columns, modifyColumns,
        leftColumns, modifyLeftColumns,
        rightColumns, modifyRightColumns,
        sourceData, setScrollVisible
    } = props;
    const bodyRef = useRef(null);
    const { scrollyVisible } = useContext(TableContext);
    const tableWidth = columns.reduce((prev, crt) => (prev + crt.width), 0);
    const leftTableWidth = leftColumns.reduce((prev, crt) => (prev + crt.width), 0);
    const rightTableWidth = rightColumns.reduce((prev, crt) => (prev + crt.width), 0);
    useEffect(() => {
        /* monitor table scroll bar visible */
        const resizeObserver = new ResizeObserver(() => {
            setScrollVisible('y', bodyRef.current.scrollHeight > bodyRef.current.clientHeight)
        });
        resizeObserver.observe(bodyRef.current);
    }, []);
    return (
        <>
            <div className={`${cssPrefix}-table-body`} ref={bodyRef} >
                <BaseTable
                    columns={leftColumns}
                    sourceData={sourceData}
                    modifyColumns={modifyLeftColumns}
                    width={leftTableWidth}
                    align="left"
                />
                <BaseTable
                    columns={columns}
                    sourceData={sourceData}
                    modifyColumns={modifyColumns}
                    width={tableWidth}
                />
                <BaseTable
                    columns={rightColumns}
                    sourceData={sourceData}
                    modifyColumns={modifyRightColumns}
                    width={rightTableWidth}
                    align="right"
                />
            </div>
            <SimulateScrollBar
                leftBarWidth={leftTableWidth}
                rightBarWidth={rightTableWidth}
                setScrollVisible={setScrollVisible}
                width={tableWidth}
                scrollyVisible={scrollyVisible}
            />
        </>

    )
}
export default TableBody;